<template>
<!--    <div class="palyBtn"  @click="changePlay">-->
<!--      <img src="@/assets/storyImage/4.jpeg" alt=""/>-->
<!--    </div>-->
    <div class="test_two_box" v-show="showMes">
      <video
        id="myVideo"
        class="video-js"
        autoplay
        controls
      >
        <source
          src="http://1.117.149.191:100/guides-web-videos/疫情生活记录-上海.mp4"
          type="video/mp4"
        >
        <!--          src="../../../assets/584870241-1-208.mp4"-->
      </video>
    </div>
</template>

<script>
    // import {eventBus} from "../../../assets/Bus";

    export default {
      name: "EpidemicCulture",
      data() {
        return {
          showMes:true
        };
      },
      mounted() {
        this.initVideo();
      },
      methods: {
        changePlay(){
          var vide= document.getElementById("myVideo");
          if(vide.paused){
            vide.play()
            this.showMes=false
          }else if(vide.play()){
            vide.pause();
            this.showMes=true
          }
        },

        initVideo() {
          //初始化视频方法
          let myPlayer = this.$video(myVideo, {
            //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
            controls: true,
            //自动播放属性,muted:静音播放
            autoplay: "muted",
            //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
            preload: "auto",
            //设置视频播放器的显示宽度（以像素为单位）
            width: "800px",
            //设置视频播放器的显示高度（以像素为单位）
            height: "400px"
          });
        }
      },
      created() {
      }
    };
</script>

<style scoped>
.test_two_box {
  padding-top: 5rem;
  padding-left: 0.1rem;
}
</style>
